<template>
  <div class="common-layout">
    <el-container>
      <el-aside :class="{ 'active': isCollapse }">
        <MenuLogo :collapsed="isCollapse" />
        <MenuList :collapsed="isCollapse" />
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-left">
            <div>
              <el-icon
                v-if="isCollapse"
                class="trigger"
                @click="() => (isCollapse = !isCollapse)"
              >
                <expand />
              </el-icon>
              <el-icon
                v-else
                class="trigger"
                @click="() => (isCollapse = !isCollapse)"
              >
                <fold />
              </el-icon>
            </div>
            <el-icon class="header-icon-menu">
              <Setting />
            </el-icon>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item
                v-for="item in breadcrumbs"
                :key="item.path"
                :to="item.path"
              >
                {{ item.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-right">
            <HeaderRight />
          </div>
        </el-header>
        <el-main>
          <ContentLayout />
        </el-main>
        <el-footer>
          <BasicFooter />
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import MenuLogo from './MenuLogo.vue'
import { useRouter, useRoute } from 'vue-router'
import ContentLayout from './ContentTabs.vue'
import BasicFooter from './BasicFooter.vue'
import HeaderRight from './HeaderRight.vue'
import MenuList from './MenuList.vue'

const route = useRoute()
const isCollapse = ref(false)

const breadcrumbs = computed(() => {
  const matched = route.matched.filter(item => item.meta?.title && item.path !== '/')
  return matched.map(item => ({
    path: item.path,
    title: item.meta?.title
  }))
})

</script>

<style scoped>
.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-right: 1px solid #dcdfe6;
  transition: width 0.3s ease;
  /* max-width: 240px; */
}

.el-aside:not(.active) {
  width: 200px;
}

.el-aside.active {
  width: 65px;
}

.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  /* background-color: #fafbfc; */
  background-color: #f3f4f5;
  padding: 6px 8px;
  /* color: #333;
  text-align: center;
  line-height: 160px; */
}

.el-footer {
  background-color: #f3f4f5;
  color: #333;
  text-align: center;
  --el-footer-height: 36px;
}

.el-header .header-left {
  float: left;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;

  .el-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 24px;
  }

  .trigger {
    line-height: 64px;

    /* padding: 0 24px; */
    cursor: pointer;
    transition: color 0.3s;
  }

  .trigger:hover {
    color: #1890ff;
  }

  .header-icon-menu {
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
  }

  .header-icon-menu:hover {
    transform: rotate(90deg);
  }

  .el-breadcrumb {
    line-height: normal;
  }
}

.el-header .header-right {
  float: right;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
